<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>设备维护</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./data/sensor.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body onload="initSelectData()">
<div id="div_resourceType">
    文本<input type="radio" value="1" name="select_resource" checked="checked">&nbsp;
    图片<input type="radio" value="2" name="select_resource">&nbsp;
    视频<input type="radio" value="3" name="select_resource">&nbsp;
</div>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">

            </div>

            <div class="layui-form-item" id="div_txt">
                <label for="L_txtContent" class="layui-form-label">
                    <span class="x-red">*</span>文本内容:</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_txtContent" name="txtContent" required="" lay-verify="txtContent"
                           autocomplete="off" class="layui-input">
                </div>
                多行文本：                    <input type="checkbox" id="input_multiline">

                <hr class="layui-border-box">
                <div>
                    <table style="width: 30px; font-size: 12px;" class="layui-table">

                        <tr>
                            <td>字号:</td>
                            <td>
                                <select id="L_txtFontSize" style="width: 20%;">
                                    <option>6</option>
                                    <option>8</option>
                                    <option>10</option>
                                    <option>12</option>
                                    <option>14</option>
                                    <option>16</option>
                                    <option>20</option>
                                    <option>24</option>
                                    <option>28</option>
                                    <option>32</option>
                                    <option>36</option>
                                    <option>48</option>
                                    <option>72</option>
                                </select>
                            </td>
                            <td>颜色:</td>
                            <td><input id="L_txtFontColor" type="color" class="layui-input-inline" value="#FF0000"/>
                            </td>
                        </tr>
                        <tr>
                            <td>特效:</td>
                            <td>
                                <select id="L_txtSpecial" style="width: 20%;">
                                    <option value="1">静止</option>
                                    <option value="3">左移</option>
                                </select>
                            </td>
                            <td>背景色:</td>
                            <td><input id="L_txtBgColor" type="color" class="layui-input-inline" value="#FF000000"/>
                            </td>
                        </tr>
                        <tr>
                            <td>居左:</td>
                            <td><input id="L_txtLeft" type="text" class="layui-input" value="0"></td>
                            <td>居上:</td>

                            <td><input id="L_txtTop" type="text" class="layui-input" value="0"></td>
                        </tr>
                        <tr>
                            <td>停留:</td>
                            <td><input id="L_txtStay" type="text" style="width: 30px; display: inline;"
                                       class="layui-input" value="10">(秒)
                            </td>
                            <td>速度:</td>
                            <td><input id="L_txtSpeed" type="text" class="layui-input" value="10">取值范围1~20 （越小越快）</td>
                        </tr>
                    </table>
                </div>
            </div>


            <div class="layui-form-item" id="div_file">
                <label for="file_1" class="layui-form-label">
                    <span class="x-red">*</span>文件:</label>
                <div class="layui-input-inline">
                    <input type="file" id="file_1" name="resourceFile" required="" lay-verify="resourceFile"
                           autocomplete="off" class="layui-input"></div>
            </div>


            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_locationX" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>位置X:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_locationX" name="coordinatex" required="" lay-verify="coordinatex" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_locationY" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>位置Y:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_locationY" name="coordinatey" required="" lay-verify="coordinatey" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_locationZ" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>位置Z:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_locationZ" name="coordinatez" required="" lay-verify="coordinatez" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_contentpids" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>内容编号:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_contentpids" name="contentpids" required="" lay-verify="contentpids" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item">-->
            <!--                <label for="L_audioid" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>语音ID:</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_audioid" name="audioid" required="" lay-verify="audioid" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->
            <!--            <div class="layui-form-item" style="display: none;">-->
            <!--                <label for="L_contentID" class="layui-form-label">-->
            <!--                    <span class="x-red">*</span>播放内容</label>-->
            <!--                <div class="layui-input-inline">-->
            <!--                    <input type="text" id="L_contentID" name="contentpids" required="" lay-verify="contentpids" autocomplete="off" class="layui-input"></div>-->
            <!--            </div>-->


            <div class="layui-form-item">
                <!--                        <label for="test" class="layui-form-label"></label>-->
                <label class="layui-form-label"></label>
                <label class="layui-form-label"></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn"
                                                                                                id="btn_upload"
                                                                                                lay-filter="upload"
                                                                                                lay-submit="">上传
            </button>
                <button class="layui-btn" lay-filter="add" lay-submit="">确定</button>
            </div>
        </form>

    </div>
    <div id="showContent" style="width: 300px;height: 200px;">
        <img src="" id="imgshow"/>
    </div>
</div>
<script>


    // $(function () {
    //     initSelectData();
    // });
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    var curInfo;
    $(document).ready(function () {
        let pid = getQueryVariable("id");
        var initLedInfo = sensorServer.getContentResourcesById({"id": pid});
        $("#div_resourceType").hide();
        curInfo = initLedInfo;
        if (curInfo.resourcesType == 1) {
            $("#div_file").hide();
            $("#btn_upload").hide();
            $("#div_txt").show();

            //初始化
            let fontparams = JSON.parse(curInfo.paramsInfo);
            $("#L_txtFontSize").val(fontparams.fontSize);
            $("#L_txtFontColor").val(fontparams.fontColor);
            $("#L_txtLeft").val(fontparams.left);
            $("#L_txtTop").val(fontparams.top);
            $("#L_txtStay").val(fontparams.stay);
            $("#L_txtSpeed").val(fontparams.speed);
            $("#L_txtSpecial").val(fontparams.special);
            $("#L_txtBgColor").val(fontparams.bgColor);

            if(curInfo.resourcesName!=""){
                $("#input_multiline")[0].checked=true;
            }
        }
        if (curInfo.resourcesType == 2 || curInfo.resourcesType == 3) {
            $("#div_txt").hide();
            $("#div_file").show();
            $("#btn_upload").show();
        }
        $("#L_txtContent").val(curInfo.txtContent);
        initSelectData(curInfo);
        showContent(curInfo);
    });

    function showContent(info) {
        if (info.resourcesType == 2) {
            let html = '<img src="imgURl" width="200px" height="200px" /> ';
            html = html.replace("imgURl", info.resourcesUrl);
            $("#showContent").html(html);
        }
        if (info.resourcesType == 3) {
            let video = '<video width="320" height="240" controls>';
            video += '<source src="videoURL" type="video/mp4">';
            video += '   ';  // <source src="movie.ogg" type="video/ogg">
            video += '    您的浏览器不支持 video 标签。';
            video += '</video>';
            let html = video.replace("videoURL", info.resourcesUrl);
            debugger;
            $("#showContent").html(html);
        }
    }

    // 点击单选按钮后触发，即，我们选择“男”时，触发一个事件，弹出选中的值
    $(document).ready(function () {
        $('input[type=radio][name=select_resource]').change(function () {
            if (this.value == 1) {

            }
            if (this.value == 2) {

            }
            if (this.value == 3) {

            }
        });
    });


    function initSelectData(curInfo) {

        layui.use(['form', 'layer', 'jquery'],
            function () {
                $ = layui.jquery;
                var form = layui.form,
                    layer = layui.layer;

                //自定义验证规则
                form.verify({
                    nikename: function (value) {
                        if (value.length < 5) {
                            return '昵称至少得5个字符啊';
                        }
                    },
                    pass: [/(.+){6,12}$/, '密码必须6到12位'],
                    repass: function (value) {
                        if ($('#L_pass').val() != $('#L_repass').val()) {
                            return '两次密码不一致';
                        }
                    }
                });

                //监听提交
                form.on('submit(add)',
                    function (data) {
                        let pid = getQueryVariable("id");
                        var initLedInfo = sensorServer.getContentResourcesById({"id": pid});
                        curInfo = initLedInfo;
                        data.field = curInfo;
                        curInfo.txtContent = $("#L_txtContent").val();
                        ;
                        var radioVal = $("input[name=select_resource]:checked").val();
                        curInfo.resourcesUrl = uploadSuccessPath;
                        debugger;
                        let multiline=0;
                        debugger;

                        if($("#input_multiline").get(0).checked){
                            multiline=1;
                        }
                        var fontParams = {
                            "fontSize": $("#L_txtFontSize").val(),
                            "fontColor": $("#L_txtFontColor").val(),
                            "left": $("#L_txtLeft").val(),
                            "top": $("#L_txtTop").val(),
                            "stay": $("#L_txtStay").val(),
                            "speed": $("#L_txtSpeed").val(),
                            "special": $("#L_txtSpecial").val(),
                            "bgColor": $("#L_txtBgColor").val(),
                            "multiline":multiline,
                        };

                        if (radioVal == 2 || radioVal == 3) {
                            if (curInfo.resourcesUrl == null || curInfo.resourcesUrl == "") {
                                alert("请选择要修改的文件并点击上传！");
                                return;
                            }
                            curInfo.resourcesName = uploadSuccessName;
                            curInfo.resourcesType = uploadSuccessType;
                        } else {
                            curInfo.resourcesName = curInfo.resourcesName;
                            curInfo.resourcesType = curInfo.resourcesType;
                            uploadSuccessName=curInfo.resourcesName;
                        }
debugger;

                        let parms = {
                            "id": curInfo.id,
                            "resourcesType": curInfo.resourcesType,
                            "txtContent": $("#L_txtContent").val(),
                            "resourcesUrl": uploadSuccessPath,
                            "resourcesName": uploadSuccessName,
                            "fontParams": fontParams
                        };

                        let result = sensorServer.updateContentResources(parms);
                        console.log(result);
                        let msg = "操作完成";
                        if (result == 1) {
                            msg = "操作完成";
                        }
                        layer.alert(msg, {
                                icon: 6
                            },
                            function () {
                                //关闭当前frame
                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            });
                        return false;
                    });

                form.on('submit(upload)',
                    function (data) {
                        upload_FileInfoRe();
                        return false;
                    });

            });
    }

    var uploadSuccessPath = "";
    var uploadSuccessName = "";
    var uploadSuccessType = "";

    function upload_FileInfoRe() {
        let formData = new FormData();
        formData.append("file", document.getElementById('file_1').files[0]);
        uploadSuccessName = document.getElementById('file_1').files[0].name;
        var maxsize = 15*1024*1024;//20M
        if(document.getElementById('file_1').files[0].size>maxsize) {
            layer.msg("上传的文件请小于15M");
            return;
        }
        if (document.getElementById('file_1').files[0].type.toString().split("/")[0] == "video") {
            uploadSuccessType = 3;
        }
        if (document.getElementById('file_1').files[0].type.toString().split("/")[0] == "image") {
            uploadSuccessType = 2;
        }
        debugger;
        let url = sensorServer.getUploadFileUrl();
        $.ajax({
            url: url,
            type: "post",
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(JSON.stringify(data));
                if (data.msg == "操作成功" && data.data != null) {
                    uploadSuccessPath = data.data;
                    layer.msg("上传成功！");
                } else {
                    alert(JSON.stringify(data));
                    layer.msg("上传失败！");
                }
            },
            error: function (e) {
                alert("错误！！");

            }
        });
    }

    $('#file_1').change(function () {
        var file = $('#file_1').get(0).files[0];
        //创建用来读取此文件的对象
        var reader = new FileReader();
        //使用该对象读取file文件
        reader.readAsDataURL(file);
        //读取文件成功后执行的方法函数
        reader.οnlοad = function (e) {
            //读取成功后返回的一个参数e，整个的一个进度事件
            console.log(e);
            //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
            //的base64编码格式的地址
            $('#imgshow').get(0).src = e.target.result;
        }
    });
</script>
</body>

</html>
